<template>
	<div>
		<!--数据统计-->
		<div class="carEditorSubmit" @click="reset" style="z-index: 10;">
			<button class="button button-icon" slot="right"  style="color: #fff; z-index: 0;">重置</button>
		</div>
		<div class="page has-navbar" v-nav="{title: '车辆订阅', showBackButton: true}">
			<div class="page-content padding-top">
				<div class="car-editor" style="background: #fff;">
					<div class="reserve">
						<list>
							<item>
								<div class="car-enitor-tr on active" @click="brandNameFn">
									<div class="car-editor-name">品牌车系</div>									
									<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
									
								</div>
								<div class="car-editor-template">
									<span v-for="item in res.series">{{item.seriesName}}<i class="ion-close-circled" @click="deleteBrand(item)"></i></span>									
								</div>
							</item>
							<item>
								<div class="car-enitor-tr on active" @click="provinceIdFn">
									<div class="car-editor-name">选择城市</div>									
									<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
									
								</div>
								<div class="car-editor-template">
									<span v-for="item in res.city">{{item.cityName}}<i class="ion-close-circled" @click="deleteProvince(item)"></i></span>									
								</div>
							</item>
							<item>
								<div class="car-enitor-tr on active" @click="carAgeShow = true">
									<div class="car-editor-name">选择车龄</div>									
									<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
									
								</div>
								<div class="car-editor-template">
									<span v-for="item in res.carAge">{{item.carAgeRemark}}<i class="ion-close-circled" @click="deleteAge(item)"></i></span>									
								</div>
							</item>
							<item>
								<div class="car-enitor-tr on active" @click="carMileageShow = true">
									<div class="car-editor-name">选择里程</div>									
									<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
									
								</div>
								<div class="car-editor-template">
									<span v-for="item in res.carMileage">{{item.carMileageRemark}}<i class="ion-close-circled" @click="deleteMileage(item)"></i></span>									
								</div>
							</item>
							
						</list>
						<list>
							<p class="template-p">注：所有订阅车源将会显示在首页订阅车源的位置</p>
						</list>
						<list>
							<item>
								 <md-button class="button button-assertive button-block" @click.native="clicked()" style="background: #FF6816;" >订阅</md-button>
							</item>
						</list>
					</div>
				</div>
			</div>
		</div>
		<transition-group enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown" >
			<modal :paramsIs="paramsIs" v-for="(item,index) in paramsIs" :key="(index)" :itemIndex="index" />
		</transition-group>	
		<transition enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown">
			<carMileage v-if="carMileageShow" @cancel="cancel1" />
		</transition>
		<transition enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown">
			<carAge v-if="carAgeShow" @cancel="cancel2" />
		</transition>
	</div>
</template>

<script>
	import carMileage from 'src/assembly/carMileage.vue'
	import carAge from 'src/assembly/carAge.vue'
	import brandModal from '../sort/brand_template.vue'
	import modal from 'src/assembly/modalList.vue'
	import { bus } from 'bus.js'
	export default{
		data(){
			return{
				res:{
					series:[],
					city:[],
					carMileage:[],
					carAge:[],
				},
				brand:{
					brandName:'',
					brandId:'',
				},
				series:{
					seriesName:'',
					seriesId:'',
				},
				province:{
					provinceName:'',
					provinceId:'',
				},
				city:{
					cityName:'',
					cityId:'',
				},
				paramsIs:[],	
				carMileageShow:false,
				carAgeShow:false,
			}
		},
		components:{
			modal,
			carMileage,
			carAge,
		},
		methods:{			
			cancel1(val){
				this.carMileageShow = false
				if(val){
					let str = JSON.stringify(this.res.carMileage)
					if(str.indexOf(val.carMileageRemark)==-1){
						this.res.carMileage.push(val)
					}
				}
			},
			cancel2(val){
				this.carAgeShow = false
				if(val){
					let str = JSON.stringify(this.res.carAge)
					if(str.indexOf(val.carAgeRemark)==-1){
						this.res.carAge.push(val)
					}
				}
			},
			deleteMileage(val){
				for(let i=0;i<this.res.carMileage.length;i++){
					if(val.carMileageId == this.res.carMileage[i].carMileageId){
						this.res.carMileage.splice(i,1)
					}
				}
			},
			deleteAge(val){
				for(let i=0;i<this.res.carAge.length;i++){
					if(val.carAgeId == this.res.carAge[i].carAgeId){
						this.res.carAge.splice(i,1)
					}
				}
			},
			brandNameFn() {
				this.brandModal.show();
			},		
			modelFn(){
				let str = JSON.stringify(this.res.series)
				if(str.indexOf(this.series.seriesName)==-1){
					this.res.series.push({
						seriesName:`${this.brand.brandName} ${this.series.seriesName}`,
						seriesId:this.series.seriesId,
					})
				}
				
			},
			deleteBrand(val){
				for(let i=0;i<this.res.series.length;i++){
					if(val.seriesId == this.res.series[i].seriesId){
						this.res.series.splice(i,1)
					}
				}
			},
			provinceIdFn() {
				window.axios.get(baseUrl + '/controller/area/province').then((res) => {
					this.paramsIs.push({
						list: [],
						title: '归属地(省)',
						emit: 'provinceId',
					})
					for(let item of res.data.result) {
						this.paramsIs[0].list.push({
							name: item.provinceName,
							id: item.provinceId
						})
					}
				})
			},
			deleteProvince(val){
				for(let i=0;i<this.res.city.length;i++){
					if(val.cityId == this.res.city[i].cityId){
						this.res.city.splice(i,1)
					}
				}
			},
			clicked(){
				
				if(!(this.res.series.length||this.res.city.length||this.res.carMileage.length||this.res.carAge.length)){
					$toast.show('订阅信息不为空', 2000)
					return
				}
				let params={}
				params.marketId = this.userSession.marketId
				params.shopId = this.userSession.shopId
				params.userId = this.userSession.userId
				params.templateJson = this.res
				window.axios.get(baseUrl+'/controller/carSelectTemplate/insertCarSelectTemplate',{params:params}).then((res)=>{
					if(res){
						setTimeout(()=>{
							$toast.show('订阅成功', 2000)
							setTimeout(()=>{
								this.$router.go(-1)
							},800)
						},400)
					}
				})
			},
			refresh(){
				window.axios.get(baseUrl+'/controller/carSelectTemplate/getCarSelectTemplateList',{params:{
					shopId:this.userSession.shopId,
					marketId:this.userSession.marketId,
				}}).then((res)=>{
					this.res = res.data.result
				})
			},
			reset(){
				window.axios.get(baseUrl+'/controller/carSelectTemplate/deleteCarSelectTemplate',{params:{
					shopId:this.userSession.shopId,
					marketId:this.userSession.marketId,
					userId:this.userSession.userId,
				}}).then((res)=>{
					if(res){
						setTimeout(()=>{
							$toast.show('重置成功', 2000)
							setTimeout(()=>{
								this.refresh()
							},800)							
						},400)
					}
				})
			}
		},
		computed: {
			userSession() {
				return sess.get('userSession')
			},
		},
		created(){
			this.refresh()			
			$modal.fromComponent(brandModal, {
				title: '选择品牌',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.brandModal = modal;
			});			
			bus.$on('brandNames', (text) => {
				this.brand.brandName = text
			});
			bus.$on('seriesIds', (text) => {
				console.log(text)
				this.series.seriesId = text
			});
			bus.$on('seriesNames', (text) => {				
				this.series.seriesName = text
				this.brandModal.hide();	
				this.$nextTick().then(()=>{
					this.modelFn()
				})
				
			});
			
			
			
			
			bus.$off('provinceId')
			bus.$off('cityIdFn')
			bus.$on('provinceId', (index) => {
				this.province.provinceName = this.paramsIs[0].list[index].name
				this.province.provinceId = this.paramsIs[0].list[index].id
				
				window.axios.get(baseUrl + '/controller/area/city', {
					params: {
						provinceId: this.province.provinceId
					}
				}).then((res) => {
					this.paramsIs.push({
						list: [],
						title: '归属地(市)',
						emit: 'cityIdFn',
					})
					for(let item of res.data.result) {
						this.paramsIs[1].list.push({
							name: item.cityName,
							id: item.cityId
						})
					}
				})
			})
			bus.$on('cityIdFn', (index) => {
				this.city.cityName = this.paramsIs[1].list[index].name
				this.city.cityId = this.paramsIs[1].list[index].id
				this.paramsIs = []
				
				
				let str = JSON.stringify(this.res.city)
				if(str.indexOf(this.city.cityName)==-1){
					this.res.city.push({
						cityId:this.city.cityName,
						cityName:this.city.cityName
					})
				}
				
			})
		},
		mounted(){
			
		},
		destroyed() {
			if (this.brandModal)
       			$modal.destroy(this.brandModal)
		}
	}
</script>
<style scoped="scoped">
	.car-editor-template { display: block; white-space: pre-wrap; padding-bottom: 10px;}
	.car-editor-template span{ display: inline-block; font-size: 12px; padding: 6px 12px; border: 1px solid #FF6816; border-radius: 5px; color: #FF6816; position: relative; margin: 5px 8px;}
	.car-editor-template span i { color: #D9D9D9; font-size: 22px; position: absolute; right: -10px; top: -10px; background: #fff;}
	.template-p { padding:0 15px ; font-size: 13px; color: #3186DC;}
	.template-submit{
		
	}
</style>